import React, {  } from "react";
import classNames from 'classnames'



// export type AlertType = 'success' | 'default' | 'danger' | 'warning'

interface baseAlert{
    text?:string,
    close?: boolean,
    type?: alertType,
    title?:string,
    className?:string,
    size?:alertSize,
}


const Alert:React.FC<baseAlert>  = (props)=>{
    let {
        text,
        type,
        close, 
        title,   
        className,    
        children,
        size,
        ...restPrpos
    } = props;

    const self:any = React.useRef(null);
    

    const classes = classNames('alert', className, {
        [`alert-${type}`]: type,
        [`alert-${size}`]: size,
    });

    const del = ()=>{
        let node:Element = self.current;
        // node
        node.parentNode?.removeChild(node);
    }



    return(
    <div
        ref={self}
        className={classes}
        {...restPrpos}>
        <div style={{display:'flex'}}>
       
            <div className="title"><h5>{title}</h5></div>
       
            <div onClick={()=>{del()}} style={{marginRight:'5%'}}><span style={{float:'left'}}>关闭</span></div>
       
        </div>
        <div className="text">
        {
            text
            ?
            text
            :
            children
        }
        </div>
    </div>
    )
}

export enum alertSize {
    Lagre = 'lg',
    Small = 'sm',
}

export enum alertType {
    Primary = 'primary',
    Warning = 'warning',
    Danger = "danger",
    Success = "success"
}


Alert.defaultProps = {
    type: alertType.Primary,
    size: alertSize.Lagre,
}


export default Alert;
